<template>
     <div class="h-p-100 w-p-100">
          <CustomCardMini>
            <div class="w-p-100 h-p-100 flex flex-col justify-around">
              <div class="flex-center" v-for="(item,index) in configData" :key="item.id || index">
                <Circle :color="item.color || colorData[index]"></Circle>
                <text class="text-white ml-10">{{ item.title }}</text>
              </div>
            </div>
          </CustomCardMini>
        </div>
</template>

<script setup>
import CustomCardMini from "../CustomCardMini/index.vue"
import Circle from "@/components/icons/circle.vue";
const porp = defineProps({
    configData: {
        Type: Array,
        default: () => []
    }
})

const colorData = ['#FF003A','#F47423','#F4E522','#00D5E1']

</script>

<style scoped>

</style>